import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import en from './locales/en-us.json';
//i18next-browser-languagedetector
//detial：https://github.com/i18next/i18next-browser-languageDetector
import LanguageDetector from 'i18next-browser-languagedetector';

/**
 * if you want add a button to change the language:
 * 
 * const { t ,i18n} = useTranslation()
 * // i18n.changeLanguage(LNG.CHINESE) // to chinese
 * // i18n.changeLanguage(LNG.ENGLISH) // to english
 */

export const LNG = {
    CHINESE: 'zh-CN',
    ENGLISH: 'en-US',
}

export const LNG_LIST = [
    { key: LNG.ENGLISH, short: 'EN', tag: 1 }
]

export const LNG_MAP: { [key: string]: number } = LNG_LIST.reduce((draft, item) => {
    draft[item.key] = item.tag
    return draft;
}, {} as { [key: string]: number })

export const DEFAULT_LNG = LNG_LIST[0].key;

// import cn from './locales/zh-cn.json'; // do not need chinese
const resources = {
    // [LNG.CHINESE]: {
    //     translation: cn
    // },
    [LNG.ENGLISH]: {
        translation: en
    },
};
i18n.use(LanguageDetector)
    .use(initReactI18next)
    .init({
        resources,
        fallbackLng: DEFAULT_LNG,
        detection: {
            caches: ['localStorage', 'sessionStorage', 'cookie'],
        }
    })

export default i18n